<template>
  <div class="box">
    <div id="myCharts"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts-gl";
// import { CanvasRenderer } from "echarts/renderers";
// import { Map3DChart,Bar3DChart } from "echarts-gl/charts";
// echarts.use([Map3DChart, CanvasRenderer,Bar3DChart]);
export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      var eZhou = require("../static/map.json");
      echarts.registerMap("eZhou", eZhou);
      var chartDom = document.getElementById("myCharts");
      var myCharts = echarts.init(chartDom);
      myCharts.setOption({
        geo3D: {
          map: eZhou,
          show: true,
          zlevel: -10,
          boxWidth: 200,
          boxHeight: 30, 
          regionHeight: 3,
          shading: "lambert",
          groundPlane: {
            show: true,
            color: "#aaa",
          },
          label: {
            show: false,
            position: "outside",
            formatter: function (params) {
              return params.name;
            },
            textStyle: {
              color: "#fff", // 高亮时标签颜色变为 白色
              fontSize: 15, // 高亮时标签字体 变大
            },
          },
          itemStyle: {
            color: "#0c294d",
            opacity: 1,
            borderWidth: 0.5,
            borderColor: "#1cccff",
          },
          emphasis: {
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 14,
                backgroundColor: "transparent", // 字体背景色
              },
            },
            borderColor: "#333",
            borderWidth: 5,
            itemStyle: {
              color: "skyblue",
            },
          },
          light: {
            main: {
              shadow: true,
              shadowQuality: "ultra",
            },
          },
          regions: [
            {
              name: "葛店开发区",
              height: 3,
              itemStyle: {
                areaColor: "#fff",
              },
              emphasis: {},
            },
            {
              name: "华容区",
              height: 3,
              itemStyle: {},
            },
            {
              name: "粱子湖区",
              height: 3,
              itemStyle: {},
            },
            {
              name: "鄂城区",
              height: 3,
              itemStyle: {},
            },
            {
              name: "主城区",
              height: 3,
              itemStyle: {},
            },
          ],
          SSAO: { enable: true, intensity: 1 },
          viewControl: {
            projection: "perspective",
            autoRotate: true,
            damping: 0,
            rotateSensitivity: 2, //旋转操作的灵敏度
            rotateMouseButton: "left", //旋转操作使用的鼠标按键
            zoomSensitivity: 2, //缩放操作的灵敏度
            panSensitivity: 2, //平移操作的灵敏度
            panMouseButton: "right", //平移操作使用的鼠标按键
            distance: 150, //默认视角距离主体的距离
            center: [1, 30, 80],
            animation: false,
            animationDurationUpdate: 1000,
            animationEasingUpdate: "cubicInOut",
          },
        },
        series: [
          //bar
          {
            type: "bar3D",
            coordinateSystem: "geo3D",
            zlevel: 3,
            barSize: 3, //柱子粗细
            shading: "lambert",
            minHeight: 20,
            itemStyle: {
              color: "#67ebc0",
            },
            emphasis: {
              // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
              label: {
                // label高亮时的配置
                show: true,
                formatter: function (params) {
                  return params.name;
                },
                textStyle: {
                  color: "#000", // 高亮时标签颜色变为 白色
                  fontSize: 15, // 高亮时标签字体 变大
                },
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                backgroundColor: "transparent",
              },
              formatter: function (params) {
                return params.name + ":" + params.value[2];
              },
            },
            data: [
              {
                name: "华容区",
                value: [114.723452, 30.480322, 600],
              },
              {
                name: "葛店开发区",
                value: [114.66121673583984, 30.541269137114718, 330],
              },
              {
                name: "鄂城区",
                value: [114.90323, 30.328127, 500],
              },
              {
                name: "粱子湖区",
                value: [114.623027, 30.168077, 500],
              },
              {
                name: "主城区",
                value: [114.87983564772333, 30.404458582600354, 500],
              },
            ],
          },
        ],
      });
      // myCharts.setOption({
      //   tooltip: {
      //     trigger: "item",
      //     formatter: function (params) {
      //       return params.name + ":" + params.value;
      //     },
      //   },
      //   visualMap: {
      //     show: true,
      //     min: 0,
      //     max: 15,
      //     inRange: {
      //       color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8"],
      //     },
      //   },
      //   series: [
      //     {
      //       type: "map3D",
      //       map: eZhou,
      //       postEffect: {
      //         enable: true,
      //       },
      //       label: {
      //         show: false,
      //         position: "outside",
      //         formatter: function (params) {
      //           return params.name;
      //         },
      //         textStyle: {
      //           color: "#000", // 高亮时标签颜色变为 白色
      //           fontSize: 15, // 高亮时标签字体 变大
      //         },
      //       },
      //       itemStyle: {
      //         opacity: 1, // 透明度
      //         borderWidth: 1.5, //分界线宽度
      //         borderColor: "#207fce", //分界线颜色
      //       },
      //       emphasis: {
      //         // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
      //         label: {
      //           // label高亮时的配置
      //           show: true,
      //           position: "outside",
      //           formatter: function (params) {
      //             return params.name;
      //           },
      //           textStyle: {
      //             color: "#000", // 高亮时标签颜色变为 白色
      //             fontSize: 15, // 高亮时标签字体 变大
      //           },
      //         },
      //       },
      //       groundPlane: {
      //         show: true,
      //         color: "#f3f4f5",
      //       },
      //       viewControl: {
      //         distance: 135, // 地图视角 控制初始大小
      //         rotateSensitivity: 5, // 旋转
      //         zoomSensitivity: 3, // 缩放
      //       },
      //       boxDepth: 100, //地图倾斜度
      //       regionHeight: 4, //地图厚度
      //       light: {
      //         main: {
      //           intensity: 1,
      //           shadow: true,
      //           alpha: 150,
      //           beta: 70,
      //         },
      //         ambient: {
      //           intensity: 0,
      //         },
      //         ambientCubemap: {
      //           diffuseIntensity: 1,
      //         },
      //       },
      //       data: [
      //         {
      //           value: 1,
      //           name: "华容区",
      //           coordinates: [114.723452, 30.480322],
      //         },
      //         {
      //           value: 2,
      //           name: "葛店开发区",
      //           coordinates: [114.66121673583984, 30.541269137114718],
      //         },
      //         {
      //           value: 3,
      //           name: "粱子湖区",
      //           coordinates: [114.623027, 30.168077],
      //         },
      //         {
      //           value: 4,
      //           name: "鄂城区",
      //           coordinates: [114.90323, 30.328127],
      //         },
      //         {
      //           value: 5,
      //           name: "主城区",
      //           coordinates: [114.87983564772333, 30.404458582600354],
      //         },
      //       ],
      //     },

      //   ],
      // });
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
}
#myCharts {
  width: 100%;
  height: 100%;
}
</style>